<template>
  <div class="vHeader">
    <dl class="logo">
      <router-link :to="{ name: 'home' }">
        <dt>
          <v-icon name="shanshuo" color="var(--v-theme)" />
        </dt>
        <dd>
          <b>混沌九章</b>
          <small>Beta</small>
        </dd>
      </router-link>
    </dl>
    <div class="navBar">
      <div class="nav">
        <ul>
          <li>
            <router-link :to="{ name: 'home' }">首页</router-link>
          </li>
          <li>
            <router-link :to="{ name: 'iconSample' }">ICONS</router-link>
          </li>
        </ul>
      </div>
      <ul class="iconList">
        <li>
          <router-link to="/"><v-icon name="search" /></router-link>
        </li>
        <li>
          <router-link to="/"><v-icon name="theme" /></router-link>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style lang="less">
.vHeader {
  display: flex;
  justify-content: space-between;

  .logo {
    padding-left: 20px;
    height: var(--v-top-height);
    display: flex;
    justify-content: center;
    flex-direction: column;

    a {
      display: flex;
      font-size: 24px;
      gap: 8px;
      line-height: 36px;

      dt {
        font-size: 32px;
      }

      dd {
        b {
          font-weight: normal;
          padding-right: 8px;
        }

        small {
          font-size: 10px;
          background: var(--v-theme);
          color: var(--v-dark);
          padding: 0 4px;
          border-radius: 2px;
          transition: all 0.4s;
        }
      }

      &:hover {
        dd {
          small {
            background: var(--v-theme);
          }
        }
      }
    }
  }

  .navBar {
    display: flex;
    line-height: var(--v-top-height);

    .nav {
      display: flex;
      flex-direction: column;
      justify-content: center;
      ul {
        display: flex;
        li {
          padding: 0 20px;

          li {
            padding: 0 20px;

            a {
              display: block;
              padding: 0 10px;
              border-bottom: transparent 3px solid;
              line-height: 58px;
              transition: all 0.4s;

              &.active {
                border-color: var(--v-theme);
                color: var(--v-theme);
              }
            }
          }
        }
      }
    }

    .iconList {
      display: flex;

      li {
        width: var(--v-top-height);
        text-align: center;
        border-left: var(--v-border) 1px solid;

        a {
          display: block;
          font-size: 20px;
        }
      }
    }
  }
}
</style>